Hey there in this lecture, let's go ahead and take a look at how to use the beam instance in Roblox.
This is perhaps my favorite instance in Roblox Studio, as it allows you to improve the atmosphere in
your games, such as adding the illusion of a light ray emanating from a light source.
To use a beam, we're going to need two attachments that define the starting point and ending point
of our beam.
So let's go ahead and create a new part inside of the workspace.
I'm going to anchor this part.
And inside of this part I'm going to add my first attachment.
I'll call this attachment one.
And then I'm going to duplicate that and call this one attachment number two.
And then I can go ahead and move these attachments around to define the starting and ending point of
my beam.
So for attachment one I'll just move it up a bit.
And we'll just do something like that.
So this is the starting point and this is the ending point of my beam.
Now let's go ahead and add a beam instance inside of here.
And then we can go ahead and define the first attachment.
And then we can go ahead and define the second attachment.
And right now we're not able to see the beam.
And that's because we have to change or enable this property to true of face camera.
So let me enable that.
And now as you can see here is our beam.
And it's going to follow along with our camera.
If I disable it then the beam disappears.
And that's because of the way we have these two attachments set up.
If I move this attachment, as you can see now the beam is visible and that's because the beam is 2D.
So of course when we merge it this way, it's going to basically collapse in on itself.
And we can't see the beam rendered anymore.
But that's one of the first properties that you'll want to use for beams is if you want to have it face
the camera, you'll just check that.
And now our beam is facing our camera.
Now our beam has a whole bunch more properties we can go ahead and manipulate, such as the color of
the beam.
And the cool thing about the color is that we are actually able to put in a color sequence, so we can
set up the colors in a gradient however we would like on our beam.
Of course, we can change the beam to whatever color we want, and we can also go ahead and hit these
three buttons here and define a gradient for our beam.
So if you want to have like a nice gradient color to your beam, let me put a color in the center here.
Do something like that.
Let me put a color down here and I'll put a color over here.
Now we kind of have a cool little gradient going on with our beam.
We have some other properties here, such as whether or not the beam is enabled.
We have light emission, which determines how much of the color of the beam should blend with the colors
behind the beam, so like the environment behind it when we're looking through it.
So if I increase the light emission to like a value of one.
As you can see, the colors of our beam are becoming more washed out, and that's because it's having
to blend with the environment behind it.
And it's also changing the light emission.
A little bit of our beam.
I'm going to leave this value at zero for now.
The next one is called light influence.
And this determines how much the environment of our game affects the brightness or the colors of our
beam.
So for example, since our light influence is at one, that means the lighting in our game completely
affects how this beam is going to be displayed.
So that means if we set it to be nighttime, as you can see, our beam has darkened in color.
If we continue to reduce the brightness in our game, we'll set it to a value of zero.
As you can see, our beam has become even more dark.
But if you don't want your beam to be affected by the lighting in your game, then you can go ahead
and set the light influence to a value of zero.
And now, no matter what the lighting in your game is, it's going to match whatever the brightness
is that you set for your beam.
So as you can see, if I set my light influence below one, I've unlocked a new property, which is
brightness, and I can increase this brightness to make my beam even brighter.
And we can set this value all the way up to 10,000.
But at this point, it'll wash the colors out and you won't be able to see much.
But I'll leave it at five for now and let me go ahead and reset.
The time of day back to 12:00.
Now another property here is texture, and this means we can add image textures into our beam.
And we can define other properties for this texture.
So let's go ahead and open up the toolbox.
And I'm going to head to images.
And I'm going to basically just grab a random image from out of here.
Let's just grab the Roblox icon.
We'll copy that asset ID, and then we'll paste that into the texture.
And as you can see, our texture is displaying a very distorted version of our Roblox logo.
And that's because the texture mode is currently set to stretch, which is going to stretch the texture
to match the length of our beam.
You can also see that our beam is moving, and that's because the texture speed is set at the value
of one.
But if we set it to the value of zero, as you can see, our beam stops moving and it is now stationary.
Now, if I change the texture mode to wrap, for example, now what it's going to do, it's going to
create tiles for the texture instead, and it's not going to distort it.
And the size of these textures is going to be determined by the texture length property here.
So if I increase this as you can see now it's going to start distorting our image more and more because
it's trying to match our texture length property which is in studs.
So right now each of the textures is five studs in length.
If I set it back to one, each one of these are one stud in length, and you can see that our image
texture is also affected by our gradient.
And let me go ahead and increase the texture speed to a value of let's say five.
As you can see, our image is moving through our beam and becoming affected by the gradient that we've
applied.
There's another mode in here called static, but you do not need to worry about it because if I select
static, as you can see, it does the exact same thing as wrap, static and wrap do the same thing.
It's just because this property takes an enum of texture mode, and the static texture mode is used
for other instances in the game, but it's not used for the beam instance.
So we just have stretch and wrap and static does the same thing as wrap.
We also have the ability to determine the transparency of our beam.
So if we don't want to see it anymore and we set it to one, boom, now we can't see it.
The other cool thing about the transparency is we're also able to apply a number sequence to it, so
we can change the transparency of our beam over time.
For example, if I do something like that, let me do something like that.
Now there's a section where our beam disappears and then reappears later in the lifetime of our beam,
which is pretty cool.
So we can sit here and manipulate the transparency of our beam.
Another property inside of our beam is something called Z offset.
And this is going to be the distance in studs the beam will display relative to the camera.
The purpose of this property is to stop something called z fighting.
And you've probably seen Z fighting.
For example, if I duplicate this part and I have them overlay each other and I change the color of
this part to something like a green.
As you can see, now we're having Z fighting, and that's because the surfaces of these parts are perfectly
overlaid above each other.
So the engine is having a hard time figuring out which one of these parts to render as we move our camera
around.
The same thing can happen with beams, so if we duplicate this, we'll have a duplicate set of beams
being overlaid over each other.
If we don't want these beams to have Z fighting, and we want to be able to just offset them slightly
away from each other, then that's what the Z offset property is going to be for.
For example, if I set this to a value of ten and let me go ahead and back up, as you can see, one
of my beams is now being offset ten studs away from its original position relative to where my camera
is looking.
If I set it to a smaller value of like 0.1, now it is offset by 0.1 studs, but it's a little bit harder
to tell because 0.1 studs is not a very big gap.
Let me go ahead and delete this other one.
The next prompt we can go ahead and take a look at are these two properties down here called curve size
zero and curve size one.
Now the purpose of these two properties is to allow us to make curves in our beam.
And that's because these two properties are going to apply a bezier curve to the tween.
And these determine the position of the second point.
That's going to be basically pulling this beam in a particular direction to apply a curve.
For example, with my attachment number one, the curve size zero.
If I set it to a value of like ten, that means the position is going to be ten studs in the y direction
of our attachment.
This is the y attachment of our axis.
And you could imagine a point ten studs in that direction of the y axis.
And that's going to be pulling our beam in that particular direction.
Now unfortunately this is not a good setup to demonstrate this.
So what I'm going to do is I'm going to move my beam over like this.
So that way we might be able to see how this property affects the beam.
And if I set curve size zero to a value of ten.
As you can see, our beam has slightly shifted, and that's because there is an invisible part or an
invisible point, ten studs above our attachment that's causing the beam to be pulled in that direction.
And we can affect this by rotating the attachment.
So as I rotate it, as you can see, the point is still going to be in line with the y axis.
But now it's going to be off in that direction, which is causing the beam to be pulled more in that
direction.
And the same thing can be done for attachment number two with the curve size one property.
If I set this one to a value of ten.
Now because this one is at the end part, it's going to cause it to pull downwards.
So this is going to be in the opposite direction of the y axis.
And if I rotate it, as you can see now it's pulling our beam in this curve.
And you can imagine a point ten studs below the y axis pulling our beam in that particular direction.
We've already taken a look at the face camera property if I disable it.
As you can see now, our.
It looks.
Actually, this is kind of interesting.
As you can see now, our texture is kind of being distorted because of how these beams are set up.
So let me actually move these attachments around a little bit.
So that way you can kind of get a better look at the texture.
So as you can see, our texture is currently facing in one direction.
It's not following our camera anymore.
And we can affect this by rotating our attachments.
So if I rotate my attachment this way now we've got an even stranger shape going on here.
And of course I can reciprocate into the same thing and rotate my texture this way.
And now, as you can see, our texture is facing upwards rather than side to side.
If we don't want that to happen, of course we can enable face camera and now our texture is going to
be looking or falling towards our camera no matter what.
We have another property here called the segments.
And to get a better look at this property, I'm going to disable the texture here.
I'm going to get rid of it.
And what segment does is it determines how detailed our beam should be.
So if you take a close look at our texture here, you can kind of see these ridges or these bumps in
our texture.
And that defines the different segments inside of our beam.
And that's because a beam is made up of a set of straight segments.
So you kind of have one segment here, another here, another here.
And the amount of segments we define here can determine how detailed we want our beam to be.
The more segments, obviously, the harder it is going to be to see these little segments inside of
our beam.
So if we increase this value to 50, as you can see, our beam has smoothed out a lot more because we
have more segments to spread out over this distance between our two beams.
So it looks very smooth, and it's basically impossible to tell that this thing is made up of individual
segments.
If I set it to a value of like five, you can see these segments even more now because we only have
five segments to define the distance between these two attachments.
These other two properties are called width zero and width one, and that determines the width of our
beam at the first and second attachment.
So for example, if I want my beam to be wider at one end but thinner at the other end, then I can
set this value here to be something like ten.
And now I have a width of ten studs at this section of my beam, and then it tapers down slowly until
we get to a width of.
One stood at this section, and if I want to make this transition look more smooth, then I can go ahead
and increase the number of segments.
And now it looks a lot better than before.
And this actually looks kind of cool, I'm not gonna lie.
Now, the amount of possibilities that you have with beams are practically endless.
You can design beams however you want in your game, and you can use them however you want.
So, for example, I've created some beams back here.
I've created this cool little kind of rainbow beam that kind of tapers down from one point to another
point, which I thought looks pretty cool.
I have another beam here using a circle texture, and this one just kind of flows from one beam to another.
Beam looks kind of like a wave going on here.
If we go ahead and look at the beam inside of this one again, it's just using a simple texture in the
wrap texture mode.
I've applied a rainbow color sequence, and I can of course change the length of the texture.
So if I want my spheres to be thinner, if I set it to a value of like one.
As you can see now, my textures are very thin and closed and bunched up with each other, but if I
set it back to four now we have individual spheres and moving along this path.
Another way you can utilize beams is by creating this illusion of a light beam coming out of a light
source.
So this looks very cool.
It kind of looks like there's a mist effect, and this can really improve the ambience in your game.
When you want to have these bright beams coming out of a particular light source, such as a spotlight
or a street light, and it looks, I would say, very cool and can improve the atmosphere of your game.
And this is very simple to make inside of here.
I just have my top attachment and my bottom attachment with my beam, and my beam has a simple texture.
You can just search in the image section in the toolbox of light beam, and you can grab a light beam
like this one.
Place it inside of your texture, and then you can just manipulate the width at the base and at the
top of your beam.
Change around the brightness, the color, the transparency settings a little bit, and bam!
You've got yourself a nice little light beam coming from a light source.
Another way you can utilize beams is by creating this TV effect over surface.
Guys.
So I've created this little add panel here with a surface guy inside of it, and I've simply just placed
two separate beams inside of here that are basically the exact same thing.
It's just one that has a slightly larger texture length than the other, and they're just moving down
across the two attachments, which is at the top and the bottom of my little ad panel here.
And I'm able to define the length or width of this texture down here, which I've set to 5.25.
If I decrease that.
As you can see, my beam tapers, but in order to match the width of my ad panel here, I've set it
to 5.25 studs.
But as you can see, it creates a very cool, shimmering and like kind of old style TV effect to my
little ad panel here, which again, can really improve the atmosphere inside of your games, especially
if you're trying to go for one of those type of neon punk style games.
This would be perfect for that kind of game design.
So the beam instance in the Roblox API is a powerful tool for creating visually interesting and dynamic
beam effects in your game.
It is personally one of my favorite instances and as demonstrated by these examples here, you can do
a lot of things with beams.